<template>
  <div class="music-player">
	  <!-- 封面 -->
	  <div class="Cover">
		 <img v-bind:src="curImg" alt="" /> 
		  
	  </div>
	  <h1>黄康前辈，爱你！！！</h1>
    <!-- 音乐列表 -->
    <div class="playlist">
      <ul>
        <li v-for="song in songs" :key="song.id" @click="playSong(songs[0])">
          {{ song.title }}
        </li>
      </ul>
    </div>
    <!-- 播放器 -->
    <div class="player">
      <div class="song-info">
        <h2>{{ currentSong.title }}</h2>
        <p>{{ currentSong.artist }}</p>
      </div>
      <audio ref="audio" :src="song.url" @ended="playNext"></audio>
      <div class="container">
		  <button @click="playlast">Last</button>
		  <button @click="playPause">
          {{ isPlaying ? 'Pause' : 'Play' }}
        </button>
        <button @click="playNext">Next</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      songs: [],         // 音乐列表
      currentSong: {},   // 当前播放的音乐
      isPlaying: false    ,// 是否正在播放
	  curImg:"",
	  imgs:[],
	  index:1,
	  song:{
		  title:"miku miku oo ee uu",
		  url:"../../src/assets/Audio/1.mp3"
	  }
	  
    };
  },
  mounted() {
    // 初始化音乐列表
    this.fetchMusicList();
	this.initImageAddr(this.$data.imgs);
	for(var i=1;i<=7;i++){
			console.log(this.$data.imgs[i]);
	}

  },
  methods: {
	  
	initImageAddr(imgs){
		for(var i=1;i<=7;i++){
			imgs.push("../src/assets/Img/"+i+".png");
		}
		
		this.$data.curImg = imgs[0];
	},
    fetchMusicList() {
		
		this.$data.songs.push();
      // 使用axios或其他方式获取音乐列表数据
      // 示例：this.$http.get('/api/music').then(response => this.songs = response.data);
    },
    playSong(song) {
      this.currentSong = songs[0];
	  
      this.$refs.audio.play();
      this.isPlaying = true;
    },
    playPause() {
      if (this.isPlaying) {
        this.$refs.audio.pause();
      } else {
        this.$refs.audio.play();
      }
      this.isPlaying = !this.isPlaying;
    },
	playlast(){
		
		var index=	this.$data.index--;
		if(index<0){
			this.$data.index=6;
		}
			this.$data.curImg=this.$data.imgs[index];
	},
    playNext() {
		
	var index=	this.$data.index++;
	if(index>=6){
		this.$data.index=1;
	}
		this.$data.curImg=this.$data.imgs[index];
		
      // 在这里实现切换到下一首歌曲的逻辑
    }
  }
};
</script>

<style scoped>
/* 在这里添加你的样式 */
.container {
  display: flex;
  justify-content: space-between;
}
.Cover{
	display: grid;
	place-items: center;
}
img {
  width: 100%;
  height: 100%;
}
</style>